<template>
  <div class="user-content">
    <div class="user-info">
      <router-link to="/loginOut">
        <i class="icon icon-shezhi"></i>
        <span>账号管理</span>
      </router-link>
      <div class="info">
        <div class="img"></div>
        <div class="text">
          <p>{{ getUserInfo && getUserInfo.username }}</p>
          <p>用户名:{{getUserInfo &&  getUserInfo.username }}</p>
          <p>{{getUserInfo &&  getUserInfo.phone }}</p>
        </div>
      </div>
    </div>
    <div class="user-menu">
      <div class="menu-item">
        <i class="icon icon-daifukuan"></i>
        <span>待付款</span>
      </div>
      <div class="menu-item">
        <i class="icon icon-daishouhuo"></i>
        <span>待收货</span>
      </div>
      <div class="menu-item">
        <i class="icon icon-yiwancheng"></i>
        <span>已完成</span>
      </div>
      <div class="menu-item">
        <i class="icon icon-quanbudingdan"></i>
        <span>全部订单</span>
      </div>
    </div>
    <div>
      <div class="user-fork">
        <div class="fork-item">
          <i>20</i>
          <span>关注的商品</span>
        </div>
        <div class="fork-item">
          <i>5</i>
          <span>关注的店铺</span>
        </div>
        <div class="fork-item">
          <i>10</i>
          <span>我的足迹</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters(['getUserInfo'])
  },
};
</script>

<style lang="scss" scoped>
.user-content {
  width: 100%;
  margin-top: 108px;
}
.user-info {
  width: 705px;
  height: 230px;
  margin: 20px 22.5px;
  font-size: 26px;
  background: linear-gradient(90deg, #eb3c3c, #ff7459);
  border-radius: 15px;
}
.user-info a {
  float: right;
  margin-right: 60px;
  margin-top: 25px;
  color: rgba(76, 0, 0, 0.7);
}
.icon-shezhi {
  font-size: 28px;
  margin-right: 5px;
  color: black;
  color: rgba(76, 0, 0, 0.7);
}
.info {
  width: 645px;
  height: 130px;
  padding: 50px 30px;
}
.info .img {
  float: left;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: url("../../../assets/123.jpg") no-repeat;
  background-size: 100%;
}
.text {
  margin-left: 140px;
}
.text p {
  line-height: 45px;
  color: white;
}
.text p:nth-child(2) {
  color: rgba(255, 255, 255, 0.7);
}

.user-menu {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 150px;
  background: #fff;

  .menu-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100px;
    text-align: center;
    margin: 25px 0;

    .icon {
      font-size: 50px;
      color: #dd9e58;

      &.icon-money {
        font-size: 44px;
        padding-top: 6px;
      }

      &.icon-quanbudingdan {
        color: red;
      }
    }

    span {
      padding-top: 10px;
      font-size: 24px;
      color: #000;
    }
  }
}

.user-fork {
  display: flex;
  margin: 30px 0;

  .fork-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100px;
    margin: 30px 0;
    text-align: center;

    i {
      font-style: normal;
      font-weight: bold;
      padding: 10px 0;
      font-size: 28px;
    }
  }
}
</style>